<!DOCTYPE html>
{% load bootstrap3 %}
{% load url from future %}
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>{% block title %}LISN:::::{% endblock %}</title>
    <meta name="description" content="">
    <meta name="author" content="Juan C. Espinoza">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="/static/css/bootstrap.min.css" media="screen" rel="stylesheet">
    <style type="text/css">
        body {padding-top: 60px}
        .form-signin {max-width: 330px;padding: 15px;margin: 0 auto;}
        .no-gutter > [class*='col-'] {padding-right:0;padding-left:0;}
        .vineta {font-family: Arial;font-size: 18px;font-weight: bold;color: #337ab7;}
    </style>
    <!--[if lt IE 9]>
	<script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->    
    {% block extra_head %}
    {% endblock %}
</head>

<body>
{% block main_menu %}
<header class="navbar navbar-default navbar-fixed-top" role="banner">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigationbar">
          <span class="sr-only">Toggle navigation</span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>
        <a class="navbar-brand" href="/" style="padding-top:1px"><img alt="Brand" src="/static/images/lisn.ico"></a>
      </div>
      <nav class="collapse navbar-collapse" id="navigationbar">
        <ul class="nav navbar-nav">
          <li class="{% block homeactive %}{% endblock %}"><a href="{% url 'apps.main.views.index' %}">About</a></li>
          <li class="{% block statactive %}{% endblock %}"><a href="#">Stations</a></li>
          <li class="{% block instactive %}{% endblock %}"><a href="#">Instruments</a></li>
          <li class="dropdown {% block dataactive %}{% endblock %}">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Data <span class="caret"></span></a>
              <ul class="dropdown-menu" role="menu">
                <li><a href="/data/download">Download Data</a></li>
                <li><a href="/data/download">Browse Data</a></li>
                <li><a href="/data/realtime">Realtime Plots</a></li>
             </ul>
          </li>
          <li class="dropdown {% block miscactive %}{% endblock %}">
             <a href="#" class="dropdown-toggle" data-toggle="dropdown">Miscellaneous <span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu">
                <li><a href="{% url 'apps.misc.views.availability' %}">Data Availability</a></li>
                <li><a href="{% url 'apps.misc.views.datasize' %}">Size of Data</a></li>
             </ul>
          </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
          <li class="nav-divider"></li>
          {% if user.is_authenticated %}
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Hi {{ user.username }}<span class="caret"></span></a>
             <ul class="dropdown-menu" role="menu">
                <li><a href="{% url 'apps.misc.views.availability' %}">Control Panel</a></li>
                <li><a href="{{ROOT_URL}}/accounts/logout?next=/">Logout</a></li>
             </ul>
          </li>
          {% else %}
          <li><a href="{{ROOT_URL}}/accounts/login">Login</a></li>
          {% endif %}                         
        </ul>
      </nav><!--/.nav-collapse -->
    </div>
</header>

<div style="clear: both;"></div>

{% endblock %}

<div class="container">
	<div id="page" class="row" style="min-height:600px">
	  <div class="col-md-9 col-xs-12" role="main">
	      <div class="page-header">
	          <h1>{% block content-title %}{% endblock %} <small>{% block content-suptitle %}{% endblock %}</small></h1>
	      </div>
	      {% block content %}{% endblock %}
	      {% block messages %}
		  {%if messages%}
		  {% for item in messages %}
		  <br>
		  <div class="alert alert-{{item.tag}} alert-dismissible" role="alert">
		    <button type="button" class="close" onclick="$('.alert').hide();"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
		    <div id="div_alert_content">{{item.text|safe}}</div>
		  </div>
		  {% endfor %}
		  {% endif%}
		  {% endblock %}
	  </div>
	  <div class="col-md-3 hidden-xs hidden-sm" role="complementary">
	    <div id="sidebar" data-spy="affix">
	    {% block sidebar %}{% endblock %}
	    </div>
	  </div>
	</div><!--/row-->       
</div> <!-- container -->

{% block footer %}
<footer class="footer">
  <div class="container">
  <p><hr></p>
  <p>
  &copy; <a href="http://lisn.igp.gob.pe">Low-Latitude Ionospheric Sensor Network</a> - {% now "Y" %}               
  </p>
  </div>
</footer>
{% endblock %}
	

<script src="/static/js/jquery.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script>
    $(function() {
        var $affixElement = $('div[data-spy="affix"]');
        $affixElement.width($affixElement.parent().width());
        var $sideElement = $('div[id="sidebar"]');
        var $pageElement = $('div[id="page"]');
        $pageElement.height($sideElement.height()+20);
        
    });    
</script>
{% block extra_js %}
{% endblock%}
</body>
</html>

